---
title: ปุ่มเชื่อมต่อ
description: การใช้และการปรับแต่งปุ่มเชื่อมต่อ
---

# ปุ่มเชื่อมต่อ

## การใช้และการปรับแต่งปุ่มเชื่อมต่อ

นี่คือคอมโพเนนต์หลัก มันมีหน้าที่ในการแสดงปุ่มเชื่อมต่อ/ยกเลิกการเชื่อมต่อ รวมไปถึง UI สำหรับการสลับโซ่ด้วย

```tsx
import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return <ConnectButton />;
};
```

> หมายเหตุ: ตรวจสอบให้แน่ใจว่าแอปของคุณถูกหุ้มด้วย provider ที่จำเป็น [อ่านเพิ่มเติม](/docs/installation#wrap-providers).

### คุณสมบัติ (Props)

คอมโพเนนต์ `ConnectButton` เปิดเผยหลาย prop เพื่อปรับแต่งลักษณะการแสดงผล รวมถึงการแสดงผลวัตถุที่แตกต่างกัน

<PropsTable
  data={[
    {
      name: 'label',
      required: false,
      default: 'เชื่อมต่อกระเป๋าเงิน',
      type: 'string',
      description: 'ป้ายข้อความที่แสดงบนปุ่มเชื่อมต่อ',
    },
    {
      name: 'accountStatus',
      required: false,
      default: 'full',
      type: '"avatar" | "address" | "full" | { smallScreen: AccountStatus, largeScreen?: AccountStatus }',
      typeSimple: 'enum',
      description:
        "ไม่ว่าที่อยู่หรืออวาตาร์ของบัญชีที่ใช้งานจะถูกแสดง",
    },
    {
      name: 'chainStatus',
      required: false,
      default: '{ smallScreen: "icon", largeScreen: "full" }',
      type: '"icon" | "name" | "full" | "none" | { smallScreen: ChainStatus, largeScreen?: ChainStatus }',
      typeSimple: 'enum',
      description:
        "ไม่ว่าไอคอนหรือชื่อของโซ่ปัจจุบันจะถูกแสดงหรือถูกซ่อนไว้ทั้งหมด",
    },
    {
      name: 'showBalance',
      required: false,
      default: '{ smallScreen: false, largeScreen: true }',
      type: 'boolean | { smallScreen: boolean, largeScreen?: boolean }',
      typeSimple: 'enum',
      description:
        'ไม่ว่ายอดคงเหลือจะมองเห็นได้ถัดจากชื่อบัญชี',
    },
  ]}
/>

> หมายเหตุ: จุดแบ่งหน้าจอแบบ `largeScreen` ที่ฝังในระบบคือ `768px`

### ตัวอย่าง

#### ป้ายข้อความ (Label)

ใช้ prop `label` เพื่อกำหนดข้อความ `ConnectButton` แบบกำหนดเอง

```tsx
<ConnectButton label="__Sign in__" />
```

#### สถานะบัญชี

นี่คือวิธีต่างๆ ที่คุณสามารถใช้ prop `accountStatus`

แสดงเฉพาะอวาตาร์ของบัญชีเท่านั้น

```tsx
<ConnectButton accountStatus="__avatar__" />
```

แสดงเฉพาะที่อยู่ของบัญชีเท่านั้น

```tsx
<ConnectButton accountStatus="__address__" />
```

#### สถานะโซ่

นี่คือวิธีต่างๆ ที่คุณสามารถใช้ prop `chainStatus`

แสดงเฉพาะไอคอนของโซ่ปัจจุบันเท่านั้น

```tsx
<ConnectButton chainStatus="__icon__" />
```

แสดงเฉพาะชื่อของโซ่ปัจจุบันเท่านั้น

```tsx
<ConnectButton chainStatus="__name__" />
```

ซ่อน UI ของโซ่ทั้งหมด

```tsx
<ConnectButton chainStatus="__none__" />
```

#### แสดงยอดเงินคงเหลือ

ใช้ prop `showBalance` เพื่อซ่อน/แสดงยอดเงินคงเหลือ

ซ่อนยอดเงินคงเหลือ

```tsx
<ConnectButton showBalance={__false__} />
```

#### ตอบสนอง (Responsive)

คุณสมบัติเหล่านี้ยังสามารถกำหนดรูปแบบที่ตอบสนองได้

บนหน้าจอขนาดเล็ก ให้แสดงเฉพาะไอคอนของบัญชี แต่บนหน้าจอขนาดใหญ่ ให้แสดงทั้งไอคอนและที่อยู่

```tsx
<ConnectButton
  accountStatus={{
    smallScreen: 'avatar',
    largeScreen: 'full',
  }}
/>
```

บนหน้าจอขนาดเล็ก ให้ซ่อนยอดเงินคงเหลือ แต่บนหน้าจอขนาดใหญ่ ให้แสดงยอดเงินคงเหลือ

```tsx
<ConnectButton
  showBalance={{
    smallScreen: false,
    largeScreen: true,
  }}
/>
```
